<template>
  <div>
    <div style="padding-top: 20%;">
      <el-steps :space="600" :active="active" finish-status="success" style="width: 100%" align-center>
        <el-step title="验证电子邮件" />
        <el-step title="重置密码" />
      </el-steps>
    </div>
      <transition name="el-fade-in-linear" mode="out-in">
        <div>
          <el-row v-if="active === 0" style="height: 100%">
            <el-col style="margin-top: 18%; padding-bottom: 25px;">
              <el-col class="flex justify-center font-bold text-3xl text-black-500">
                重置密码
              </el-col>
              <el-col class="flex justify-center text-ms text-gray-500" style="padding-top: 10px;">
                输入邮箱信息
              </el-col>
            </el-col>
            <el-col class="flex justify-center">
              <el-form :rules="rules" ref="formRef" :model="form" style="width: 75%;" @validate="onValidate">
                <el-form-item prop="email">
                  <el-input v-model="form.email" placeholder="邮箱地址">
                    <template #prefix>
                      <el-icon><Message /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="authCode">
                  <el-row :gutter="3">
                    <el-col :span="16">
                      <el-input v-model="form.authCode" :maxlength="6" placeholder="输入邮箱验证码">
                        <template #prefix>
                          <el-icon><EditPen /></el-icon>
                        </template>
                      </el-input>
                    </el-col>
                    <el-col :span="3">
                      <el-button type="success" :disabled="!isEmailValid || coldTime > 0" @click="validateEmail">
                        {{coldTime > 0? '请稍后' + coldTime + '秒': '获取验证码'}}
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button round class="w-[295px]"  type="danger" @click="startReset" plain>点击进入重置密码</el-button>
                </el-form-item>
                <el-row>
                  已记得密码？<el-link type="primary" @click="router.push('/')">点击立即登录</el-link>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </transition>
      <transition name="el-fade-in-linear" mode="out-in">
        <div>
          <el-row v-if="active === 1" style="height: 100%">
            <el-col style="margin-top: 18%; padding-bottom: 25px;">
              <el-col class="flex justify-center font-bold text-3xl text-black-500">
                重置密码
              </el-col>
              <el-col class="flex justify-center text-ms text-gray-500" style="padding-top: 10px;">
                请一定要记得
              </el-col>
            </el-col>
            <el-col class="flex justify-center">
              <el-form :rules="rules" ref="formRef" :model="form" style="width: 75%;" @validate="onValidate">
                <el-form-item prop="password">
                  <el-input type="password" show-password v-model="form.password" placeholder="请输入新密码">
                    <template #prefix>
                      <el-icon><lock/></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                  <el-input type="password" show-password v-model="form.repassword" placeholder="请确认新密码">
                    <template #prefix>
                      <el-icon><lock/></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button round class="w-[295px]"  type="danger" @click="doReset" plain>点击重置密码</el-button>
                </el-form-item>
                <el-row>
                  已记得密码？<el-link type="primary" @click="router.push('/')">点击立即登录</el-link>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </transition>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {post, postForm} from "@/utils/axiosMethod.js";

const active = ref(0)
const form = reactive({
  password: '',
  repassword: '',
  email: '',
  authCode: ''
})
const formRef = ref(null)
const coldTime = ref(0)

const validateRepassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请重新再输入密码'))
  } else if (value !== form.password) {
    callback(new Error("两次输入的密码不相符!"))
  } else {
    callback()
  }
}
const isEmailValid = ref(false)
const onValidate = (prop, isValid)=> {
  if (prop === 'email') {
    isEmailValid.value = isValid
  }
}
const rules = reactive({
  password: [{
    required: true,
    message: '密码不能为空',
    trigger: ['blur', 'change'],
  },],
  repassword: [{
    validator: validateRepassword,
    trigger: ['blur', 'change'],
  },],
  email: [{
    required: true,
    type: 'email',
    message: '请输入正确的邮箱地址！',
    trigger: ['blur', 'change'],
  },],
  authCode: [{
    required: true,
    message: '验证码不能为空',
    trigger: 'blur',
  },],
})
const validateEmail = ()=> {
  coldTime.value = 60
  postForm('/api/auth/valid-reset-email', {
    email: form.email
  }, (message)=> {
    ElMessage.success(message)
    setInterval(()=> coldTime.value--, 1000)
  }, (message)=> {
    ElMessage.warning(message)
    coldTime.value = 0
  })
}
const startReset = ()=> {
  formRef.value.validate((isValid)=> {
    if (isValid) {
      postForm('/api/auth/start-reset', {
        email: form.email,
        code: form.authCode
      }, ()=> {
        active.value++
      })
    } else {
      ElMessage.warning("请检查所填写的内容！")
    }
  })
}
const doReset = ()=> {
  formRef.value.validate((isValid)=> {
    if (isValid) {
      postForm('/api/auth/do-reset', {
          password: form.password
      }, (message)=> {
        ElMessage.success(message)
        router.push("/")
      })
    } else {
      ElMessage.warning("请检查所填写的内容！")
    }
  })
}
</script>

<style scoped>

</style>